<template>
  <div class="article">
    <Header />
    <div class="main">
      <div class="banner">
        <img
          v-if="this.delete"
          :src="`http://47.113.189.57:5000/articleBanner/` + article.acover"
          alt=""
        />
        <div class="title">
          <h1>{{ article.atitle }}</h1>
          <span>{{ article.aintrduce }}</span>
        </div>
      </div>
      <div class="container">
        <div class="article-body">
          <div class="article-title">
            <h2>{{ article.atitle }}</h2>
            <p>
              <span>发布时间：{{ article.atime }}</span>
              <span>作者：米斯特 · 陈</span>
              <span>来源：米斯特 · 陈个人博客</span>
            </p>
            <h3>
              <i class="iconfont icon-24gf-tags3"></i>{{ article.aclassify }}
            </h3>
          </div>
          <div class="article-content">
            <mavonEditor
              v-model="context"
              :toolbars="toolbars"
              defaultOpen="preview"
              :editable="false"
              :subfield="false"
              codeStyle="atom-one-dark-reasonable"
              :scrollStyle="false"
              previewBackground="var(--mainContent-bg)"
              :navigation="true"
              :toolbarsFlag="false"
            />
            <div class="article-actions">
              <div title="文章点赞">
                <i class="iconfont icon-dianzan_kuai"></i>
                <span>{{ article.alike }}</span>
              </div>
              <div title="文章收藏">
                <i class="iconfont icon-shoucang2"></i>
                <span>{{ article.afavorite }}</span>
              </div>
              <div title="回到顶部" @click="goAnchor('.banner')">
                <i class="iconfont icon-xiangshang"></i>
                <span></span>
              </div>
            </div>
          </div>
          <Comment />
        </div>
        <div class="article-list" :class="show ? 'fixed' : ''">
          <div class="list-Suspensions">
            <div class="list-title">
              <span>显示悬浮目录</span>
              <div class="switch-toggle">
                <input type="checkbox" id="bluetooth" @click="hideChange()" />
                <label for="bluetooth"></label>
              </div>
            </div>
            <transition>
              <div class="list-body" v-show="hide">
                <span v-for="item in toc" :key="item.name">
                  <a @click="goAnchor(item.href)">{{ item.name }}</a>
                </span>
              </div>
            </transition>
          </div>
          <div class="article-actions">
            <div title="文章点赞" @click="likeFavorite('1')">
              <i class="iconfont icon-dianzan_kuai"></i>
              <span>{{ article.alike }}</span>
            </div>
            <div title="文章收藏" @click="likeFavorite('2')">
              <i class="iconfont icon-shoucang2"></i>
              <span>{{ article.afavorite }}</span>
            </div>
            <div title="回到顶部" @click="goAnchor('.banner')">
              <i class="iconfont icon-xiangshang"></i>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <Footer />
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Comment from '@/components/Comment.vue'
import { mavonEditor } from 'mavon-editor'
// import { markdown } from '@/utils/markdown'
// import Clipboard from "clipboard";
import $ from 'jquery'

export default {
  name: 'Article',
  props: ['id'],
  data() {
    return {
      article: {},
      show: false,
      hide: false,
      delete: false,
      toc: [],
      context: '', //输入的数据
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
      },
      user: {},
    }
  },
  components: {
    Header,
    Footer,
    Comment,
    mavonEditor,
  },
  methods: {
    goAnchor(id) {
      // this.$el.querySelector(selector).scrollIntoView({
      //   behavior: 'smooth', //平滑过渡
      //   block: 'start',
      // })
      let position = $(id).offset()
      position.top -= 100
      $('html,body').animate({ scrollTop: position.top }, 1000)
    },
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      scrollTop >= 660 ? (this.show = true) : (this.show = false)
    },
    getContents() {
      const aArr = $(
        '.v-note-panel .v-note-navigation-wrapper .v-note-navigation-content a'
      ).toArray()
      let toc = []
      aArr.forEach((item) => {
        let href = $(item).attr('id')
        let name = $(item).parent().text()
        if (href) {
          toc.push({
            href: '#' + href,
            name,
          })
        }
      })
      this.toc = toc
    },
    hideChange() {
      this.hide = !this.hide
      this.getContents()
    },

    sendBolg() {
      console.log(this.context)
    },
    getThisArticle() {
      let aid = this.$route.params.id
      this.$axios
        .get('/article/wz/' + aid)
        .then((res) => {
          // 查询成功
          let data = res.data.data[0]
          this.article = data
          this.delete = true
          // this.context = markdown(mavonEditor,this.article.abody)
          this.context = this.article.abody
        })
        .catch((err) => {
          console.log(err)
          this.$message({
            message: '网页发生了错误！',
            type: 'error',
          })
        })
    },
    setUser() {
      return this.$store.getters.user
    },
    likeFavorite(type) {
      if (!this.user.id) {
        this.$message.error('请先登录！')
      } else {
        // console.log(this.article)
        let params = {
          uid: this.user.id,
          aid: this.article.aid,
          type: type,
        }
        this.$api.user
          .likeFavorite(params)
          .then((res) => {
            if (res.data.code == 200) {
              if (type == '1') {
                this.article.alike++
                this.$message.success('点赞成功！')
              }

              if (type == '2') {
                this.article.afavorite++
                this.$message.success('收藏成功！')
              }
            } else if (res.data.code == 201) {
              if (type == '1') {
                this.article.alike--
                this.$message.success('取消点赞成功！')
              }

              if (type == '2') {
                this.article.afavorite--
                this.$message.success('取消收藏成功！')
              }
            } else {
              this.$message('未知状态？？')
            }
          })
          .catch((err) => {
            console.log(err)
            this.$message({
              message: '???网页怎么出问题了',
              type: 'error',
            })
          })
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
    // this.$nextTick(() => {
    //   let clipboard = new Clipboard(".copy-btn");
    //   // 复制成功失败的提示
    //   clipboard.on("success", () => {
    //     this.$toast.success("复制成功");
    //   });
    //   clipboard.on("error", () => {
    //     this.$toast.error("复制失败");
    //   });
    // });
  },
  created() {
    this.getThisArticle()
    this.user = this.setUser()
  },
}
</script>

<style lang="scss" scoped>
.main {
  min-height: 800px;
  background-color: var(--main-bg);
  color: var(--main-color);
  > .banner {
    position: relative;
    width: 100%;
    height: 700px;
    min-height: 300px;
    overflow: hidden;
    transition: height 0.3s;
    > img {
      width: 100%;
      z-index: -1;
    }
    > div.title {
      color: var(--main-bg);
      position: absolute;
      text-align: center;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .container {
    // justify-content: center;
    padding: 20px 100px;
    > .article-body {
      width: 1200px;
      text-align: center;
      > .article-title {
        border-radius: 5px 5px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-color: var(--mainContent-bg);
        margin-bottom: 2px;
        > h2 {
          margin: 20px 0 10px;
        }
        > p {
          > span {
            margin-right: 10px;
            border-bottom: 1px solid var(--main-color);
          }
        }
        > h3 {
          color: orange;
          margin: 10px 0 20px;
          > i {
            margin-right: 1em;
          }
        }
      }
      > .article-content {
        .markdown-body {
          color: var(--main-color) !important;
        }
        > .article-actions {
          display: none;
          flex-direction: row;
          justify-content: space-around;
        }
      }
    }
    > .article-list {
      width: 250px;
      margin-left: 1em;
      transition: 0.3s;
      position: absolute;
      right: 6%;
      z-index: 1000;
      > .list-Suspensions {
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        overflow: hidden;
        > .list-title {
          margin-bottom: 2px;
          padding: 10px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          background-color: var(--mainContent-bg);
          > span {
            font-size: 1.1em;
          }
          > .switch-toggle {
            height: 40px;
            input[type='checkbox'] {
              position: absolute;
              opacity: 0;
              z-index: -2;
            }
            input[type='checkbox'] + label {
              position: relative;
              display: inline-block;
              width: 100px;
              height: 40px;
              border-radius: 20px;
              margin: 0;
              // cursor: pointer;
              cursor: url('../../public/link.png'), auto;
              box-shadow: var(--articleButton-shadow);
            }
            input[type='checkbox'] + label::before {
              position: absolute;
              content: 'OFF';
              font-size: 13px;
              text-align: center;
              line-height: 25px;
              top: 8px;
              left: 8px;
              width: 45px;
              height: 25px;
              border-radius: 20px;
              color: black;
              background-color: #eeeeee;
              box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.5),
                3px 3px 5px rgba(0, 0, 0, 0.25);
              transition: 0.3s ease-in-out;
            }
            input[type='checkbox']:checked + label::before {
              left: 50%;
              content: 'ON';
              color: var(--main-color);
              background-color: #00b33c;
              box-shadow: -3px -3px 5px rgba(255, 255, 255, 0.5),
                3px 3px 5px #00b33c;
            }
          }
        }
        > .list-body {
          background-color: var(--mainContent-bg);
          padding: 30px 20px 20px 20px;
          display: flex;
          flex-direction: column;
          max-height: 30em;
          overflow: auto;
          > span {
            margin-bottom: 10px;
            > a {
              color: var(--main-color);
              // cursor: pointer;
              cursor: url('../../public/link.png'), auto;
              transition: color 0.3s;
              &:hover {
                color: orange;
              }
            }
          }
        }
      }
    }
    > .fixed {
      position: fixed;
      top: 100px;
    }
    .article-actions {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      > div {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: var(--mainContent-bg);
        margin-bottom: 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        // cursor: pointer;
        cursor: url('../../public/link.png'), auto;
        > i {
          font-size: 30px;
        }
      }
    }
  }
}
/* 离开后的状态 */
.v-leave-to,
/* 从什么状态进入 */
.v-enter {
  transform: translateX(-100%);
}

/* 开始离开的状态 */
.v-leave-from,
/* 进入之后打算变成的状态 */
.v-enter-to {
  transform: translateX(0%);
}

/* 离开过程中做什么 */
.v-leave-active,
/* 进入的过程中做什么 */
.v-enter-active {
  transition: 0.3s linear;
}
</style>
